<template>
    <div class="course">
        <!-- 头部 -->
        <InsideHeader :bannerType="bannerType"></InsideHeader>
       
        <!-- 面包屑 -->
        <!-- <crumb></crumb> -->
        <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-serveList'}">服务支持</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-culCenter'}">培训中心</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-fatec'}">FATEC</nuxt-link>
                    <em>></em>
                    {{fatceinfo.courseName}}
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="block">
            <div class="title">
                <span>{{fatceinfo.courseName}}</span>
            </div>
            <div class="introduce">
                <div class="title">
                    课程介绍
                </div>
                <div class="desc">
                  {{fatceinfo.enrollmentTarget}}
                </div>
            </div>
            <div class="cultivate">
                <div class="title">培训教材</div>
                <table width="100%" cellpadding="0" border="0" cellspacing="" style="border-color: #fff;" >
                    <tr>
                        <th width="10%">编号</th>
                        <th width="60%">教材名称</th>
                        <th width="150%">下载</th>
                    </tr>
                    <tr v-for="(item,index) in fatceinfo.fatecMaterialsVos":key="index">
                        <td>{{item.sortNum}}</td>
                        <td><p>{{item.title}}</p></td>
                        <td>
                            <img @click="modu(item.title,item.filePath,item.catalogPath)" src="../../static/newsImg/dn.png" alt="">
                        </td>
                    </tr>

                </table>
            </div>
            <div class="msg">
                <div class="title">课程信息</div>
                <div class="desc">
                  {{fatceinfo.courseIntroduction}}
                </div>
            </div>
              <div class="schedule">
                <div class="title">课程日程表</div>
                <table width="100%" cellpadding="0" border="0" cellspacing="" style="border-color: #fff;" >
                    <tr>
                        <th width="40%">日期</th>
                        <th width="15%">地址</th>
                        <th width="15%">城市</th>
                        <th width="15%">人数</th>
                        <th width="15%">操作</th>
                    </tr>
                    <tr v-for="(item,index) in fatceinfo.fatecScheduleVos":key="index">
                        <td>{{item.beginTime}}-{{item.endTime}}</td>
                        <td>{{item.address}}</td>
                        <td>{{item.studyCity}}</td>
                        <td>{{item.recruitCount}}</td>
                        <td>
                        <div class="want" @click="factecact()">
                            我要报名
                        </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="none">
                <a href="">没有我要的课程，请点击</a>
            </div>
            <div class="pop" v-if="show">
                <div></div>
                <div class="popCont" >
                   <div class="box">
                       <div class="del">
                           <p>{{curTitle}}</p>
                           <img src="../../static/newsImg/del.png" @click="del">
                       </div>
                       <ul>
                           <li>
                               <p>目录</p>
                               <img src="../../static/newsImg/dn1.png" @click="muluurl(catalogPath)">
                           </li>
                           <li>
                               <p>教材</p>
                               <img src="../../static/newsImg/dn.png" @click="muluurl(filepath)">
                           </li>
                       </ul>
                   </div>
                </div>
            </div>
        </div>

        <!-- 链接 -->
        <Insidelink></Insidelink>

        <!-- 底部 -->
        <HomeHooter></HomeHooter>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
            <div class="qcode">
                
                 <img src="../../static/images/facteccode.jpg"/>
          <span>扫码立即报名</span>
            </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs';
    import $ from "jquery";
    import "@/assets/css/news.css";
    import InsideHeader from "@/components/head";
    import HomeHooter from "@/components/footer";
    import crumb from "@/components/crumb";
    import Insidelink from "@/components/link";
    export default {
        name: "practiceCourse",
        components: {
            InsideHeader,
            HomeHooter,
            crumb,
            Insidelink,
        },
        data(){
          return{
              show:false,
              bannerType:'certificateW',
              fatceinfo:{},
              dialogVisible:false,
              curTitle:'',
              filepath:'',
              catalogPath:''
          }
        },
        methods:{
            muluurl(url){
                location.href=url
            },
            factecact(){
                this.dialogVisible=true
            },
            modu(title,filepath,catalogPath){
                this.show=true
                this.curTitle=title
                this.filepath=filepath
                this.catalogPath=catalogPath
            },
            del(){
                this.show=false
            },
             //fatec详情
            coursedata(oid){
              let id = this.$axios,
              params = qs.stringify({
                fatecCourseOid:oid
              });
              this.$api.serve.getFatecCourseDetail(id, params).then(res => {
                let result = res.data;
                if (result.code === 1) {
                  this.fatceinfo=result.data
                }
              });
            },
        },
          created(){
            this.coursedata(this.$route.query.id)
        }
    }
</script>

<style scoped>
.desc{
    font-size: 14px;
    line-height: 25px;
}
.qcode{
    text-align: center;
}
.qcode span{
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
